﻿<%@ Page Title="" Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="MainPage.aspx.cs" Inherits="MainPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="Scripts/jquery.signalR-2.1.1.min.js"></script>
<script src="http://localhost/UBOX/UboxWeb/signalr/hubs"></script>
<script src="Scripts/jquery.timer.js"></script>
<style>
    
        #userName {
            display: none;
            color: red;
        }
        .choose{
            background: green;
        }
        .ctr-container{
            margin: 20px auto;
            width:780px;
            height: 1000px;
            border: 1px solid #AAA;
            box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
            padding: 0;
            background:#eee;
            cursor: default;
        }
        .ctr-toolbar{
            background: #fff;
            box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
            width: 100%;
            height: 32px;
            position: relative;
        }
        .ctr-toolbar>.elem{
            /*border: 1px solid blue;*/
            width: 10%;
            height: 26px;
            line-height: 26px;
            margin: 3px 0 3px 0;
            display: inline-block;
        }
        .ctr-toolbar>.elem:nth-child(1){
        }
        .ctr-toolbar>.elem:nth-child(3){
            position: absolute;
            width: 58px;
            left: 50%;
            margin-left: -24px;
        }
        #ctr3>img{
            height: 26px;
            margin: 0 auto;
        }
        .ctr-menu-container{
            border: 1px solid #aaa;
            box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
            width: 100%;
        }
        .ctr-menu{
            position:absolute;
            /*border: 1px solid #555;*/
            width: auto;
            height: 50px;
            display: table;
            margin-left:45px; 
            margin-top:5px;
            padding-top:40px;
        }
        .ctr-menu>.elem{
            border: 1px solid #BBB;
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin: 10px 0.3em;
            display: inline-block;

        }
        .ctr-bottom{
            /*border: 1px solid #888;*/
            width: 90%;
            height: 80px;
            display: table;
            margin-top:115px;
            margin-left:40px;
            background:#fff;
        }
        .ctr-bottom>.elem{
            border: 1px solid #555;
            width: 128px;
            line-height: 148px;
            height: 148px;
            margin: 10px 5px 10px 5px;
            display: inline-block;
            font-size:40px;
        }
        .elem{
            text-align: center;
            line-height: 100px;
            width: 100px;
            height: 100px;
            /*border: 1px solid #555;*/
            opacity: 0.3;
        }
    .point {
        
        /*font: 20em 900;*/
        padding-left: 5px;
        padding-top: 5px;
        color: blue;
    }
    .ctr19 {
        background: url("img/button.gif") 0px -104px no-repeat;
        position:relative;
        left:-315px;
        top:-45px;
    }
    .ctr18 {
        position:relative;
        left:40px;
    }
    .ctr17 {
        position:relative;
        left:18px;
    }
    .product {
        background:url("img/product0.gif");
    }
        .product:hover {
            background:url("img/product1.gif");
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="ctr-container">
        <div class="ctr-toolbar">
            <div id="ctr1" class="elem" style="background: url('img/button.gif') -1px -1px no-repeat;"></div><%--搜尋--%>
            <div id="ctr4" class="elem" style="float:right; background: url('img/button.gif') 0px -79px no-repeat;"></div><%--登入--%>
            <div id="ctr3" class="elem" style="background:url('img/uboxlogo.png'); background-size:58px 26px; background-repeat:no-repeat;"></div><%--LOGO--%>
            <div id="ctr2" class="elem" style="float:right; background: url('img/button.gif') 0px -52px no-repeat;"></div><%--比拚(外)--%>
            <div id="ctr5" class="elem" style="background: url('img/button.gif') 0px -27px no-repeat;"></div><%--KeyWord--%>
        </div>
        <div class="ctr-menu-container">
            <div class="ctr-menu">
                <div id="ctr6" class="elem ctr17" style="background: url('img/boxicon40x40.png') 0px 0px no-repeat;"></div><%--手機--%>
                <div id="ctr7" class="elem ctr17" style="background: url('img/boxicon40x40.png') -40px 0px no-repeat;"></div><%--平板--%>
                <div id="ctr8" class="elem ctr17" style="background: url('img/boxicon40x40.png') -80px 0px no-repeat;"></div><%--穿帶裝置--%>
                <div id="ctr9" class="elem ctr18" style="background: url('img/brand-logo240x40.png') -80px 0px no-repeat;"></div><%--iphone--%>
                <div id="ctr10" class="elem ctr18" style="background: url('img/brand-logo240x40.png') -120px 0px no-repeat;"></div><%--htc--%>
                <div id="ctr11" class="elem ctr18" style="background: url('img/brand-logo240x40.png') -40px -40px no-repeat;"></div><%--sony--%>
                <div id="ctr12" class="elem ctr18" style="background: url('img/brand-logo240x40.png') 0px -40px no-repeat;"></div><%--sansung--%>
                <div id="ctr13" class="elem ctr18" style="background: url('img/brand-logo240x40.png') 0px -80px no-repeat;"></div><%--LG--%>
                <div id="ctr14" class="elem ctr18" style="background: url('img/brand-logo240x40.png') -80px -40px no-repeat;"></div><%--nokia--%>
                <div id="ctr15" class="elem ctr18" style="background: url('img/brand-logo240x40.png') -40px 0px no-repeat;"></div><%--asus--%>
                <div id="ctr16" class="elem ctr18" style="background: url('img/brand-logo240x40.png') -120px -40px no-repeat;"></div><%--miui--%>
                <div id="ctr17" class="elem ctr18" style="background: url('img/brand-logo240x40.png') 0px 0px no-repeat;"></div><%--acer--%>
                <div id="ctr18" class="elem ctr18" style="background: url('img/brand-logo240x40.png') -40px -80px no-repeat;"></div><%--moto--%>
                <div id="ctr19" class="elem ctr19" ></div><%--比拼(內)--%>
            </div>
        </div>
        <div class="ctr-bottom">
            <div id="ctr20" class="elem" style="background: url('img/new.gif');"></div><%--最新消息--%>
            <div id="ctr21" class="elem product"></div>
            <div id="ctr22" class="elem product"></div>
            <div id="ctr23" class="elem product"></div>
            <div id="ctr24" class="elem product"></div>
            <div id="ctr25" class="elem product"></div>
            <div id="ctr26" class="elem product"></div>
            <div id="ctr27" class="elem product"></div>
            <div id="ctr28" class="elem product"></div>
            <div id="ctr29" class="elem product"></div>
            <div id="ctr30" class="elem product"></div>
            <div id="ctr31" class="elem product"></div>
            <div id="ctr32" class="elem product"></div>
            <div id="ctr33" class="elem product"></div>
            <div id="ctr34" class="elem product"></div>
            <div id="ctr35" class="elem product"></div>
            <div id="ctr36" class="elem product"></div>
            <div id="ctr37" class="elem product"></div>
            <div id="ctr38" class="elem product"></div>
            <div id="ctr39" class="elem product"></div>
            <div id="ctr40" class="elem" style="width:680px; height:60px; background: url('img/20before.gif');"></div>
        </div>
    </div>
    <script type="text/javascript">
        var colors = ['Lavender', 'LavenderBlush', 'LawnGreen', 'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan', 'LightGoldenRodYellow', 'Ivory', 'Khaki', 'SpringGreen', 'Aquamarine', 'Beige', 'AliceBlue'];

        $(function () {

            $.connection.hub.url = 'http://localhost/UBOX/UboxWeb/signalr';
            //建立與Server端的Hub的物件，注意Hub的開頭字母一定要為小寫
            var ctr = $.connection.mainPageCtrHub;

            //將連線打開
            $.connection.hub.start({ jsonp: true }).done(function () {
                //當連線完成後，呼叫Server端的hello方法，並傳送使用者姓名給Server
            });;

            //建立連線後，我們接著來定義client端的function來讓Server端的hub呼叫。
            ctr.client.flashElement = function (id) {
                var i = Math.floor(Math.random() * 14);
                var color = colors[i];
                if (id >= 40) {
                    id = 40;
                }
                var elem = $('#ctr' + id);
                //elem.css("background-color", color)
                elem.css("opacity", 1)
                             .fadeTo(250, 1, function () { elem.fadeTo(250, 0.3) });

            }
        });

        function getPercentage() {
            $.getJSON('Handler/HandlerMainPage.ashx', function (data) {
                for (var i = 0; i < data.length; i++) {
                    var id = 'ctr' + data[i].id;
                    var pct = '<span class="point"><strong>' + data[i].percentage + '</strong>%</span>';
                    $('#' + id).html(pct);
                }
            })
        }
        var timer = $.timer(function () {
            getPercentage();
        });
        timer.set({ time: 2500, autostart: true });

    </script>
</asp:Content>

